<template>
	<div class="limit_buy">
		<div class="div">
			<label>人民币余额:</label>
			<span>3223</span>
			<a>充值</a>
		</div>
		<div class="div">
			<label>市价可买BTC:</label>
			<span>3223</span>
		</div>
		<div class="div">
			<label>平均持仓成本:</label>
			<span>3223</span>
		</div>

		<!--<div class="market-tip"> 以市场价上最优价格买入
			<div class="v-tooltip at-top"> [?]
				<tooltip title="当使用市价买入时，系统会根据您预留的数量在市场上从高到低进行扫单，直至人民币用完为止。"></tooltip>
			</div>
		</div>

		<input type="text" placeholder="买入金额 CNY" />-->
		<ul class="trade_container">
			<li>
				<p>买入价格</p>
				<input type="text" />
			</li>
			<li>
				<span class="mark">&times;</span>
			</li>
			<li>
				<p>数量</p>
				<input type="text" placeholder="BTC"/>
			</li>
			<li>
				<span class="mark">=</span>
			</li>
			<li>
				<p>交易金额</p>
				<input type="text" placeholder="CNY"/>
			</li>
		</ul>

		<div>
			<range :value.sync="50" :min="0" :max="100" :step="25" theme="danger"></range>
		</div>

		<div>
			<p>
				<label style="float: left;color: #1B1E23">预估买入量</label>
				<label style="float: right;color: #1B1E23">0.00BTC</label>
			</p>
			<p>
				<font style="color: #E11853;padding: 0 5px 0 0;">*</font>以实际买入量为准，以上仅为预估值</p>
		</div>

		<input type="text" placeholder="请输入资金密码" />
		<div>
			<p>
				<label style="color: #9B9B9B;float: left;">忘记资金密码？</label>
				<label style="color: #9B9B9B;float: right;">免输资金密码</label>
			</p>
		</div>

		<button style="background: #E93C6F;">
			买入BTC
		</button>
	</div>
</template>

<script>
	export default {
//		props: ['title', 'subtitle', 'news'],
	};
</script>

<style lang="scss">
	.limit_buy {
		font-size: 12px;
		width: 320px;
		padding: 0px 5px;
		float: left;
		color: #1B1E23;
		.div {
			height: 30px;
			line-height: 30px;
			label {
				width: 120px;
				display: inline-block;
				color: #9b9b9b;
			}
			span {}
			a {
				float: right;
				color: #0093f1;
			}
		}
		p {
			overflow: auto;
			height: 20px;
			line-height: 20px;
			margin: 5px 0;
		}
		.trade_container{
			overflow: hidden;
			li{
				float: left;
				text-align: center;
				input {
					width: 91px;
				}
				.mark{
					display: inline-block;
					font-size: 200%;
					margin-top: 35px;
				}
			}
		}
		.market-tip {
			background-color: #ebebeb;
			border: 1px solid #d1d2d4;
			color: #5e5e5e;
			font-size: 12px;
			height: 35px;
			line-height: 33px;
			margin-bottom: 14px;
			padding-left: 10px;
			position: relative;
			.v-tooltip {
				color: #3392d6;
				line-height: 34px;
				right: -141px;
				position: relative;
				top: 0;
				display: inline;
				cursor: pointer;
				.tooltip-title {
					display: none;
					margin-left: -328px;
					line-height: 15px;
					height: 53px;
					&:after {
						left: 180px;
					}
				}
			}
			.v-tooltip:hover {
				.tooltip-title {
					display: block;
				}
			}
		}
		input[type='text'] {
			height: 45px;
			width: 310px;
			font-size: 14px;
			padding: 0px 10px;
			border: 1px solid #cbcbcb;
		}
		button {
			width: 310px;
			height: 50px;
			font-size: 14px;
			color: white;
			margin-top: 20px;
			margin-bottom: 41px;
		}
	}
</style>